#@mainLayout({pageTitle:"JFinal Handler实现对纯API接口数据进行透明化加/解密处理"})

#define pageCss()
 <style>
  .row{margin-bottom: 10px;}
  </style>
#end  

#define mainContent()
<div id="main" class="container"  style="font-size:18px;">
  <div class="row">
  <div class="col-lg-6 col-sm-6 col-md-6">
<div class="panel panel-default">
  <div class="panel-heading">一、数据加解密示例</div>
  <div class="panel-body">
	<form id="form1" method="post" onsubmit="return false;">
	<li class="list-group-item">
   	<div class="form-group">
   	<label>1、请输入随机生成的IV字符串（英文大小写字母与数字0~9混合，可访问https://suijimimashengcheng.51240.com生成），不填则后台随机生成</label>
   	<input name="iv" value="a4RcEIyEhmH5lJKW"  type="text" class="form-control" placeholder="请输入16位IV字符串">
   	</div>	
   	<div class="form-group">
   	<label>2、请输入待加密的原始JSON数据(下面是示例，可以改成任何格式标准的json数据)</label>
   	<textarea name="originalData" style="height:500px;" class="form-control">
{
  "className": "六年一班",
  "classNo": 6001,
  "courses": ["语文","数学","英语"],
  "stuList": [
    {
      "name": "张三",
      "age": 12
    },
    {
      "name": "李四",
      "age": 11
    },
    {
      "name": "王五",
      "age": 11
    },
    {
      "name": "赵六",
      "age": 12
    }
  ]
}   	
   	</textarea>
   	</div>
	</li>
	<li class="list-group-item" style="text-align: center;">
	<label>接口地址：/encryptData</label>	
	<button class="btn btn-primary btn-sm" onclick="encryptData('form1')">参数加密</button>
	</li>	
	<li class="list-group-item" style="text-align: center;">
   	<div class="form-group">
   	<label>加密结果（实际运用中加密处理由调用方按接口协议进行处理，加密后使用相关工具类进行接口调用，比如JFinal的HttpKit，当然语言不仅仅限于Java）</label>
   	<textarea name="encryptedData" readonly="readonly" style="height:150px;" class="form-control"></textarea>
   	</div>
	<div class="clearfix"></div>	
	</li>
	<li class="list-group-item" style="text-align: center;">
   	<label>接口地址：/parseEncryptedData</label>	
	<button class="btn btn-primary btn-sm" onclick="sendRequest('form1',1)">参数解密</button>
	</li>
	<li class="list-group-item" style="text-align: center;">
   	<label>接口地址：/parseEncryptedDataByParams，不可修改默认json数据，否则后台Controller无法通过形参取值，请查看IDE控制台输出</label>	
	<button class="btn btn-primary btn-sm" onclick="sendRequest('form1',2)">形参取值</button>
	</li>
  </form>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">二、后台通过HttpKit调用接口示例</div>
  <div class="panel-body">
	<li class="list-group-item" style="text-align: center;">
	<label>演示接口请求方通过后台调接口提供方接口</label>
	<input id="type" value="" type="text" class="form-control" type="number" placeholder="输入一个数字，返回特定数据  1：水果 2：运动 3：国家  其他：返回错误">	
	</li>
		<li class="list-group-item" style="text-align: center;">
   	<label>接口地址：/test</label>	
	<button class="btn btn-primary btn-sm" onclick="test();">测试</button>
	</li>
  </div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6" >
<div class="panel panel-default pinned" style="margin-top: 10px;">
  <div class="panel-heading">控制台<button style="margin-left:10px;" class="btn btn-primary btn-sm" onclick="clearConsole()">清空控制台</button></div>
  <div class="panel-body">
  <div id="Canvas" class="Canvas"></div>
  </div>
</div>
  </div>
  </div>  
</div>
#end

#define pageJs()
<script src="#(basePath)/static/js/jquery.pin.js"></script>
<script type="text/javascript">
$(function(){
	$(".pinned").pin();
	$("li a.ajax").on("click",function(){
		var _this=$(this);
		var url=_this.attr("href");
		appLoading("执行中...");
		$.ajax({
			type:"get",
			url:url,
			dataType:"json",
			success:function(data){
				closeAppLoading();
				JsonConsoleProcess(data);
			}
		});
		return false;
	});
});

function encryptData(formId){
	appLoading("执行中...");
	var paramObj = {}
	//json字符串
	var jsonStr = $("#"+formId).find("textarea[name=originalData]").val();
	paramObj["data"] = jsonStr;
	//添加iv到对象中
	paramObj["iv"] = $("#"+formId).find("input[name=iv]").val();
	console.log(paramObj);
	$.post("#(basePath)/encryptData",paramObj,function(result){
		closeAppLoading();
		$("#"+formId).find("textarea[name=encryptedData]").val(result);
	});
}

function sendRequest(formId,type){
	var encryptedData = $("#"+formId).find("textarea[name=encryptedData]").val();
	if(encryptedData==""){
		alert("数据尚未加密，请加密以后再解密");
		return;
	}
	//默认调无形参取值
	var url = "#(basePath)/parseEncryptedData";
	//调用形参取值
	if(type == 2){
		url = "#(basePath)/parseEncryptedDataByParams";
	}
	//这里当然也可以用get方式传输，即$.get(url?q=密文) 
	$.post(url,{"q":encryptedData},function(result){
		closeAppLoading();
		JsonConsoleProcess(result);
	});	
}

//测试通过后台调用接口
function test(){
	var type = parseInt($("#type").val());
	if(isNaN(type)){
		type = 0;
	}
	$.get("#(basePath)/test?type="+type,function(result){
		alert(result);
	});
}

function clearConsole(){
	$("#Canvas").empty();

}

</script>
#end